<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#leftName, #btn, #rightName{
				float: left;
				width: 150px;
				height: 300px;
			}
			#toRight,#toLeft{
				margin-top:100px ;
				margin-left:50px;
				width: 50px;
			}
			option{
				font-size: 24px;
			}
			.border{
				height: 500px;
				padding: 100px;
			}
		</style>
		<script src="../js/jquery-3.7.1.min.js"></script>
		<script !src="">
			$(function () {

				$("#toLeft").click(function () {
					// $("#rightName>option:selected").appendTo($("#leftName"))
					$("#leftName").append($("#rightName>option:selected"))
				})

				$("#toRight").click(function () {
					// $('#leftName>option:selected').appendTo($("#rightName"))
					$("#rightName").append($('#leftName>option:selected'))
				})
			})


		</script>
	</head>
	<body>
		<div class="border">
			<select id="leftName" multiple="multiple">
				<option>java</option>
				<option>web</option>
				<option>python</option>
				<option>linux</option>
			</select>
			<div id="btn">
				<input type="button" id="toRight" value="-->"><br>
				<input type="button" id="toLeft" value="<--">

			</div>

			<select id="rightName" multiple="multiple">
				<option>Android</option>
				<option>MySQL</option>
			</select>

		</div>


	</body>
</html>
